<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            .box1 {
                width: 500px;
                height: 500px;
                /* 
                  background-color 设置背景颜色
                */
                background-color: #bfa;

                /* 
                  background-image 设置背景图片
                    - 可以同时设置背景图片和背景颜色,这样背景颜色将会成功图片的背景色
                    - 如果背景图片小于元素,则背景图片会自动在元素中平铺,将元素铺满
                    - 如果背景的图片大于元素,将会有一部分背景无法完全显示
                    - 如果背景图片和元素一样大,则会正常显示
                */
                background-image: url(./img/1.png);

                /* 
                  background-repeat 用来设置背景的重复方式
                    可选值:
                      repeat 默认值, 背景会沿着x轴,y轴双方向重复平铺
                      repeat-x 只沿着x轴重复
                      repeat-y 只沿着y轴重复
                      no-repeat 背景图片不重复
                */
                background-repeat: no-repeat;

                /* 
                  background-position 用来设置背景图片的位置
                    设置方式:
                      通过top left right bottom center 几个表示方位的词来设置背景图片的位置
                      实际就是个九宫格,来移动,使用方位词时,必须要同时指定两个值,如果只写一个则第二个默认就是center

                      通过偏移量来指定背景图片的位置:
                        水平方向的偏移量 垂直方向变量
                */
                /* background-position: top right; */
                background-color: -10px 10px;
            }
        </style>
    </head>
    <body>
        <div class="box1"></div>
    </body>
</html>
